import React, { forwardRef, useEffect, useRef, useState } from "react";
import { Card, Breadcrumb, Layout, List, } from "antd";
import {
  getComponentList,
  getComponentType,
  addComponent,
  editComponent,
  deleteComponent
} from "../../api/component/index";
import { SearchTool, ComponentCard, DrawForm } from "../../components";


const { Content } = Layout;

function Home() {
  const [drawVisibal, setDrawVisibal] = useState(false);
  const [componentData, setComponentData] = useState([{}]);
  const [tags, setTags] = useState([]);
  const [drawProps, setDrawProps] = useState({
    title: "新增",
    typeVisibal: false,
    handleClose: () => { setDrawProps({ ...drawProps, visible: false }); },
    visible: drawVisibal,
    handleFinish: async (values, type) => {
      console.log(type);
      
      setDrawProps({ ...drawProps, visible: false });
      if (type === "新增") {
        await addComponent(values);
      } else {
        await editComponent(values.id, values);
      }
      const newList = await getComponentList();
      setComponentData([{}, ...newList.data]);
    },
    tags: tags,
    data: null
  });

  const ref = useRef();
  const componentCardRef = useRef();

  const ForwardSearchTool = forwardRef(SearchTool);
  const ForwardComponentCardRef = forwardRef(ComponentCard);

  useEffect(async () => {
    const tagRes = await getComponentType();
    setTags(tagRes.data);
    setDrawProps({ ...drawProps, tags: tagRes.data });
    const listRes = await getComponentList();
    setComponentData([...componentData, ...listRes.data]);
    // await deleteComponent('xxx');
    // await deleteComponent('1435128873398411264');
  }, [tags])

  return (
    <Card>
      <Breadcrumb separator=">">
        <Breadcrumb.Item href="/home">角色管理</Breadcrumb.Item>
        <Breadcrumb.Item href="/home/1">组件管理</Breadcrumb.Item>
      </Breadcrumb>

      <Content style={{ margin: "15px 0" }}>
        <ForwardSearchTool ref={ref} tags={tags} handleFinish={() => {
          console.log(ref.current.getParams());
        }} />
        <List
          grid={{ gutter: 16, column: 4 }}
          dataSource={componentData}
          renderItem={item => (
            <List.Item>
              <ForwardComponentCardRef data={item}
                handleNewComponentItem={() => { setDrawProps({ ...drawProps, data: null, tags, visible: true, title: '新增' }); }}
                ref={componentCardRef}
                handleDelete={async (id) =>{
                  console.log(id);
                  await deleteComponent(id);
                  const newList = await getComponentList();
                  console.log(newList);
                  setComponentData([{}, ...newList.data]);
                }}
                handleEdit={(componentData) => {
                  setDrawProps({
                    ...drawProps,
                    title: '修改',
                    data: {
                      ...componentData,
                      state: { ...componentData.state },
                      configuration: { ...componentData.configuration },
                      typeObject: { ...componentData.typeObject },
                    },
                    visible: true,
                    typeVisibal: true,
                  });
                }}
                handleDataChange={() => { console.log(componentCardRef.current.getCurrentData()); }} />
            </List.Item>
          )}
        />
        {drawProps.visible ? <DrawForm data={drawProps} /> : null}
      </Content>
    </Card>
  );
}

export default Home;
